<template>
  <div class="bg-red-600 px-2 pb-2 text-white" :style="{ paddingTop: statusBarHeight }">
    <div class="text-lg">
      小星星
    </div>

    <div class="mt-2">
      你也爱小星星吗
      <div class="i-fxemoji-star" />
    </div>
  </div>

  <wd-search v-model="searchValue" light hide-cancel />

  <div class="mx-2">
    <wd-swiper v-model:current="swiperCurrent" :list="swiperList" autoplay />
  </div>
</template>

<script setup lang="ts">
const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = `${systemInfo.statusBarHeight}px`;

const searchValue = ref('');

const swiperCurrent = ref<number>(0);
const swiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
]);
</script>

<style lang="scss" scoped></style>
